<template>
  <div class="swiper-container home-hero-swiper">
    <div class="swiper-wrapper" style="transition-duration: 800ms">
      <div
        class="swiper-slide item"
        v-for="i in slide_List"
        :key="i.id"
        :data-swiper-slide-index="i.id"
      >
        <a href="">
          <!-- :src="defaultImg" -->
          <img :src="i.img" alt="" class="swiper-lazy swiper-lazy-loaded" />
        </a>
      </div>
    </div>
    <!-- 底部点点 -->
    <div class="swiper-pagination">
      <a
        class="swiper-pagination-bullet"
        v-for="(item, i) in slide_List"
        :key="i"
        @click="selectSlide(item.id)"
      ></a>
    </div>
    <!-- 上一个 -->
    <div class="swiper-button-prev" @click="prevImg"></div>
    <!-- 下一个 -->
    <div class="swiper-button-next" @click="nextImg"></div>
  </div>
</template>

<script>
export default {
  name: "LunboImgs",
  data() {
    return {
      slide_List: [
        {
          id: 1,
          img: require("../../../assets/imgs/slide1.jpg"),
        },
        {
          id: 2,
          img: require("../../../assets/imgs/slide2.jpg"),
        },
        {
          id: 3,
          img: require("../../../assets/imgs/slide3.jpg"),
        },
        {
          id: 4,
          img: require("../../../assets/imgs/slide4.jpg"),
        },
        {
          id: 5,
          img: require("../../../assets/imgs/slide5.jpg"),
        },
        {
          id: 6,
          img: require("../../../assets/imgs/slide6.jpg"),
        },
      ],
      defaultImg: require("../../../assets/imgs/slide1.jpg"),
      isActiveClass: false,
      // 图片 的index---ID
      ImgID: 0,
      // 定时器
      timer: null,
      // 控制定时器的时间
      time: 0,
      // 控制节流的时间
      previous: 0
    };
  },
  created() {
    this.timer = setInterval(() => {
      this.time++;
      if (this.time == 30) {
        this.nextImg();
        this.time = 0;
      }
    }, 100);
  },
  mounted() {
    this.goindex();
    var items = document.getElementsByClassName("item");
    items[0].className = "swiper-slide item active";
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    // 选择右下角的点点
    selectSlide(i) {
      this.time = 0;
      this.clearAcive();
      var points = document.getElementsByClassName("swiper-pagination-bullet");
      var items = document.getElementsByClassName("item");
      this.ImgID = i - 1;
      points[i - 1].className = "swiper-pagination-bullet selectDot";
      items[i - 1].className = "swiper-slide item active";
    },
    // 上一张
    prevImg() {
      this.time = 0;
      if (this.ImgID == 0) {
        this.ImgID = 5;
      } else {
        this.ImgID--;
      }
      this.goindex();
    },
    // 下一张
    nextImg() {
      // this.time = 0;
      // if (this.ImgID < 5) {
      //   this.ImgID++;
      // } else {
      //   this.ImgID = 0;
      // }
      // this.goindex();
      // var context, args;
      // -------------------------------------------
      // 这个更适合用节流来控制，走了点弯路，我每次点击nextImg，ImgID会+1，所以用这种方法会较好
      var that = this; 
      
      var now = +new Date();
      // console.log(now,previous)
      if (now - this.previous > 1500) {
          if (this.ImgID < 5) {
              this.ImgID++;
            } else {
              this.ImgID = 0;
            }
            this.goindex();
          this.previous = now;
      }
      // --------------------------------------------
      // 防抖
      // var timeout;
      // var that = this; 
      
      //   clearTimeout(timeout)
      //   if (!timeout) {
      //       timeout = setTimeout(function(){
      //         //  that.time = 0;
      //           if (that.ImgID < 5) {
      //             that.ImgID++;
      //           } else {
      //             that.ImgID = 0;
      //           }
      //           that.goindex();
      //       }, 1000)
      //   }
      // this.throttle(this.goindex,1000)()
    },
    goindex() {
      this.clearAcive();
      var items = document.getElementsByClassName("item");
      var points = document.getElementsByClassName("swiper-pagination-bullet");

      items[this.ImgID].className = "swiper-slide item active";
      points[this.ImgID].className = "swiper-pagination-bullet selectDot";

      
      
      
    },
    // 清除多余激活对象
    clearAcive() {
      var items = document.getElementsByClassName("item");
      var points = document.getElementsByClassName("swiper-pagination-bullet");

      for (let i = 0; i < items.length; i++) {
        items[i].className = "swiper-slide item";
        points[i].className = "swiper-pagination-bullet";
      }
    },
    // 节流函数,等待研究。。。
    throttle(func, wait) {
      var timeout;
      var context = this; 
      return function() {
        clearTimeout(timeout)
        if (!timeout) {
            timeout = setTimeout(function(){
                func.apply(context)
            }, wait)
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-sizing: content-box;
  transition-property: transform, -webkit-transform;
  .swiper-slide {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
  }
}
.active {
  z-index: 10;
  opacity: 1 !important;
}
.home-hero-swiper {
  position: relative;
  height: 460px;
  overflow: hidden;
  img {
    display: block;
    width: 1226px;
    height: 460px;
  }
  // 底部的轮播点
  .swiper-pagination {
    position: absolute;
    width: 400px;
    height: 21px;
    left: auto;
    right: 30px;
    bottom: 20px;
    text-align: right;
    z-index: 10;
    transition: opacity 0.3s;
    // background-color: red;
    .swiper-pagination-bullet {
      width: 6px;
      height: 6px;
      border: 2px solid #fff;
      border-color: hsla(0, 0%, 100%, 0.3);
      border-radius: 10px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.4);
      opacity: 1;
      outline: none;
      cursor: pointer;
      margin: 0 4px;
      display: inline-block;
    }
    .swiper-pagination-bullet:hover {
      background: hsla(0, 0%, 100%, 0.4);
      border-color: rgba(0, 0, 0, 0.4);
    }
  }
  .swiper-button-next,
  .swiper-button-prev {
    left: 0;
    background: url(../../../assets/imgs/icon-slides.png) no-repeat -84px 50%;
    right: auto;
  }
  .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 41px;
    height: 69px;
    margin-top: -35px;
    z-index: 10;
    cursor: pointer;
    outline: none;
    left: 234px;
  }
  .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 41px;
    height: 69px;
    margin-top: -35px;
    z-index: 10;
    cursor: pointer;
    outline: none;
    background: url(../../../assets/imgs/icon-slides.png) no-repeat -125px 50%;
    right: 0;
    left: auto;
  }
  .swiper-button-next:hover {
    background-position: -42px 50%;
  }
  .swiper-button-prev:hover {
    background-position: 0 50%;
  }
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.selectDot {
  background: hsla(0, 0%, 100%, 0.4) !important;
  border-color: rgba(0, 0, 0, 0.4) !important;
}
</style>